import React, { Component } from 'react'
import { Button } from 'antd-mobile';
import MyFooter from './MyFooter';

export default class CartList extends Component {
  state = {
    allChecked: false
  }
  render() {
    let { list, allPrice, allNum } = this.props;
    let { allChecked } = this.state
    console.log('list', list);
    console.log('allPrice', allPrice);
    console.log('allNum', allNum)
    return (
      <div className="index">
        <header>
          <h2>购物列表</h2>
        </header>
        <main>
          {
            list.filter((item) => item.num).map((item, index) => {
              return <li key={index}>
                <input type="checkbox" checked={item.checked} onChange={(e) => {
                  this.setState({
                    list: list.map((i, j) => {
                      if (index === j) {
                        i.checked = e.target.checked
                      }
                      return i
                    }),
                    allChecked: list.every(item => item.checked)
                  })
                }} />
                <img src={item.img} alt="" />
                <p>{item.title}</p>
                <p>
                  {item.price}
                </p>
                <div>
                  <Button type="primary" onClick={() => {
                    if (item.num > 0) {
                      item.num--;
                    }

                    this.props.setList(list);
                  }}>-</Button>
                  {item.num}
                  <Button type="primary" onClick={() => {
                    item.num++;
                    this.props.setList(list);
                  }}>+</Button>
                </div>


              </li>
            })
          }
                    全选：<input type="checkbox" checked={allChecked} onChange={(e) => {

            this.setState({
              allChecked: e.target.checked,
              list: list.map((item, index) => {
                item = e.target.checked
                return item
              })

            })
          }} /> 总价{allPrice}  总数:{allNum}
        </main>
        <MyFooter></MyFooter>
      </div>
    )
  }
}



